
<template>
    <el-dialog v-model="showDialog" :title="drawerTitile" :close-on-click-modal="true" :destroy-on-close="destroyOnClose"
        @close="clean">
        <div class="formDrawer">

            <el-form ref="formRef" :rules="rules" :model="formData" label-width="80px" size="small">
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入用户名" v-model="formData.password"></el-input>
                </el-form-item>
                <el-form-item label="重复密码" prop="repassword">
                    <el-input placeholder="请输入用户名" v-model="formData.repassword"></el-input>
                </el-form-item>
            </el-form>

            <div class="actions">
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
                <el-button type="default" @click="close">取消</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, computed, reactive, toRef } from "vue"
import {
    toast,
    md5
} from '~/composables/util.js'
import User from '~/api/user.js'

const showDialog = ref(false)
const props = defineProps({
    destroyOnClose: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object, // 假设初始值是一个对象
        default: () => ({}) // 默认为空对象
    },
    drawerTitile: {
        type: String,
        default: '修改密码'
    }
})

const loading = ref(false)


const formRef = ref(null)
const formData = reactive({})

/**
 * 密码和重复密码的验证
 * @param {Object} rule - 规则对象
 * @param {Object} value - 规则对象值
 * @param {Function} rule - 回调函数
 * @returns {void} 无
 */
function passwordValidator(rule, value, callback) {
    if (!value) {
        callback(new Error('密码不能为空'));
    } else if (value !== formData.password) {
        callback(new Error('密码和重复密码不一致'));
    } else {
        callback();
    }
}

//表单验证规则
const rules = {
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
    repassword: [
        { required: true, message: '重复密码不能为空', trigger: 'blur' },
        { validator: passwordValidator, trigger: 'blur' },
    ],
};


// 打开对话框
const open = () => {
    showDialog.value = true
    loading.value = false
    console.log(1)
    console.log(formData)
}

// 关闭对话框
const close = () => showDialog.value = false

//提交表单
const submit = () => {
    console.log(formData)
    formRef.value.validate(async (valid) => {
        const form = { ...formData }
        form.userId = toRef(props.data).value.userId
        form.password = md5(form.password)
        delete form.repassword
        console.log('提交的数据为:')
        console.log(form)
        loading.value = true
        if (!valid) {
            loading.value = false
            return false
        } else {
            await User.updatePassword(form).then(res => {
                console.log(res)
                if (res.data.data !== null) {
                    toast('修改成功', 'success', false, 3000)
                    close()
                    loading.value = false
                } else {
                    toast(res.data.msg, 'warning', false, 3000)
                }
            }).catch(err => {

            })
        }
    })
}

//向父组件暴露clean方法
const emit = defineEmits(["clean"])
const clean = () => {
    formRef.value.resetFields()
    emit("clean")
}


// 向父组件暴露以下方法
defineExpose({
    open,
    close
})

</script>
<style>
.formDrawer {
    width: 100%;
    height: 100%;
    position: relative;
    @apply flex flex-col;
}

.formDrawer .body {
    flex: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto;
}

.formDrawer .actions {
    height: 50px;
    @apply mt-auto flex items-center;
}
</style>